<template>
  <div class="footer glbFlex">
    <p
      v-for="(item, index) in list"
      :key="index"
      :class="activeStyle == index ? 'active' : ''"
      @click="btnStyle(index,item)"
    >
      <i :class="`iconfont ${item.iconfont}`" style="font-size: 20px"></i>
      <span>{{ item.name }}</span>
    </p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      list: [
        { name: "首页", iconfont: "icon-shouye", path: "/" },
        { name: "分类", iconfont: "icon-fenlei", path: "proClass" },
        { name: "京喜", iconfont: "icon-jiangjia" },
        { name: "购物车", iconfont: "icon-gouwuchekong", path: "cart" },
        { name: "我的", iconfont: "icon-wode", path: "my" },
      ],
      activeStyle: 0,
    };
  },
   props:{
    indexS:{
      type:Number||String
    }
  },
   watch:{
    indexS(newVal,oldVal){
      console.log(55555555);
         this.activeStyle = newVal
           sessionStorage.setItem('footIndex',newVal)
    }
   },
  // 添加一个生命周期=>读取本地的数据
  created(){
    if(sessionStorage.getItem('footIndex')){
       this.activeStyle = sessionStorage.getItem('footIndex')

    }
  },
  
  methods: {
    btnStyle(index,item) {
      //点击事件给元素添加红色样式
      this.activeStyle = index;
      this.$router.push(item.path);
      sessionStorage.setItem('footIndex',index)
    },
  },
};
</script>

<style scoped lang='scss'>
.footer {
  width: 100%;
  height: 300px;
  position: fixed;
  z-index: 1;
  bottom: 0px;
  background: white;
  p {
    text-align: center;
    color: rgb(88, 84, 84);
    display: flex;
    flex-direction: column;
    span {
      font-size: 12px;
    }
  }
  .active {
    color: red;
  }
}
</style>